<!--
* @description 任务完成率卡片
* @author zywu
* @date 2021/03/19 15:54:03
!-->
<template>
  <div class="primary-panel is-shadow inspect-complete">
    <div class="primary-panel__head">任务完成率</div>
    <div class="progress">
      <van-progress
        :percentage="completeness"
        stroke-width="70px"
        color="linear-gradient(#41e7be 0%, #20cba0 100%)"
        track-color="#E9FFFA"
        :show-pivot="false"
      />
      <span class="rate-num" :style="{ 'left':completeness<=30?(completeness+3+'%'):'10px' }">
        {{completeness}}
        <span class="unit">%</span>
      </span>
    </div>
    <div class="count-list d-flex ai-center jc-between">
      <div class="count-list__item" @click="jumpTab(0,'')">
        <div>
          <span class="num">{{dataObj.totalTaskCount||0}}</span>个
        </div>
        <div class="label">总任务 ></div>
      </div>
      <div class="count-list__item" @click="jumpTab(0,'2')">
        <div>
          <span class="num">{{dataObj.finishedTaskCount||0}}</span>个
        </div>
        <div class="label">完成数 ></div>
      </div>
      <div class="count-list__item" @click="jumpTab(2)">
        <div>
          <span class="num">{{dataObj.unPassPointCount||0}}</span>次
        </div>
        <div class="label">不合格点位 ></div>
      </div>
    </div>
    <div v-if="isPersonal" class="count-list d-flex ai-center jc-between">
      <div class="count-list__item">
        <div>
          <span class="num">{{dataObj.totalPointCount||0}}</span>次
        </div>
        <div class="label">点位次数</div>
      </div>
      <div class="count-list__item">
        <div>
          <template v-if="dataObj.totalTime">
            <template v-for="item in totalTime">
              <span class="num" :key="item.unit">{{item.value}}</span>
              {{item.unit}}
            </template>
          </template>
          <span v-else class="num">-</span>
        </div>
        <div class="label">总耗时</div>
      </div>
      <div class="count-list__item">
        <div>
          <template v-if="dataObj.averageTime">
            <template v-for="item in averageTime">
              <span class="num" :key="item.unit">{{item.value}}</span>
              {{item.unit}}
            </template>
          </template>
          <span v-else class="num">-</span>
        </div>
        <div class="label">平均耗时</div>
      </div>
    </div>
  </div>
</template>

<script>
// "unIsOkNum": 0,   //有不合格点位的任务数
// "total": 9,  总的任务数（分页用这个total）
// "finishedTaskCount": 0,  //已完成的任务数
// "unExaminedNum": 0,//未完成的任务数
// "pointNum":12,//累计点位总数
// "noOkPointNum":3  //不合格点位数（两次任务中，同一个点位不合格算两次）
import { getTimeDuration } from '@/utils/util'
export default {
  props: {
    isPersonal: Boolean,
    dataObj: {
      type: Object,
      default: function () {
        return {}
      },
    },
  },
  data() {
    return {}
  },

  computed: {
    completeness() {
      if (!this.dataObj.finishedTaskCount || !this.dataObj.totalTaskCount)
        return 0
      return Math.ceil(
        (this.dataObj.finishedTaskCount * 100) / this.dataObj.totalTaskCount
      )
    },
    totalTime() {
      if (!this.dataObj.totalTime) return []
      return getTimeDuration(this.dataObj.totalTime / 1000)
    },
    averageTime() {
      if (!this.dataObj.averageTime) return []
      return getTimeDuration(this.dataObj.averageTime / 1000)
    },
  },

  created() {},

  mounted() {},

  methods: {
    jumpTab(tabIndex, completeness) {
      this.$emit('jumpTab', {
        tabIndex,
        completeness,
      })
    },
  },
}
</script>
<style lang='scss'>
.inspect-complete {
  &.primary-panel {
    padding: 20px 18px 0;
  }
  .van-progress {
    box-shadow: 0px 2px 20px 2px rgba(181, 200, 206, 0.5);
  }
  .van-progress__portion {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
  .progress {
    position: relative;
    .rate-num {
      position: absolute;
      left: 10px;
      top: 50%;
      transform: translateY(-50%);
      color: #333;
      font-size: 20px;
      font-weight: 500;
    }
    .unit {
      font-size: 12px;
    }
  }
  .count-list {
    &__item {
      padding: 18px 10px;
      font-size: 12px;
      color: #666;
      .num {
        font-size: 21px;
        color: #333;
        font-weight: 500;
      }
      .label {
        margin-top: 6px;
        color: #9999;
      }
    }
  }
}
</style>